<template>
  <div class="search-popup">
    <van-search
    v-model="searchVal"
    show-action
    :placeholder='placeVal'
    @search="onSearch"
    @cancel="onCancel"
    @input="onInput"
  />

  <HistoryHot 
  v-if="blockShow==1"
  :historyKeywordList="historyKeywordList"
  :hotKeywordList="hotKeywordList"
  @tagClick='tagClick'
  />
  <SearchTipsList v-else-if="blockShow==2"
  :searchTipsListData='searchTipsListData'
  @tagClick='tagClick'
  />
  <SearchProductList v-else-if="blockShow==3"
    :productsListData="productsListData"
    :filterCategory="filterCategory" 
    @categoryChange='categoryChange'
    @priceChange='priceChange'
   />
  </div>
</template>

<script>
import HistoryHot from '@/components/search/HistoryHot'
import SearchTipsList from '@/components/search/SearchTipsList'
import SearchProductList from '@/components/search/SearchProductList'
import {mapMutations} from 'vuex'
import {GetHishotData,GetSearchTipsData,GetGoodsListData} from '@/request/api.js'
export default {
  components:{
    HistoryHot,SearchTipsList,SearchProductList
  },
  data () {
    return {
       searchVal:"",
        blockShow:1,
        placeVal:'',
        historyKeywordList:[],
        hotKeywordList:[],
        searchTipsListData:[],
        productsListData:[],
        filterCategory:[],
        order:'desc',
        sort:'id',
        categoryId:0
    }
  },
  created(){
    GetHishotData().then(res=>{
      if(res.errno==0){
        let {defaultKeyword,historyKeywordList,hotKeywordList} = res.data
        this.placeVal = defaultKeyword.keyword
        this.historyKeywordList=historyKeywordList
        this.hotKeywordList=hotKeywordList
      }
    })
  },
  methods:{
     tagClick(value){
    this.onSearch(value)
  },
    priceChange(value){
      this.sort = 'price'
      this.order = value
      this.onSearch(this.searchVal)
    },
    categoryChange(id){
      this.categoryId = id;
      this.onSearch(this.searchVal)
    },
     ...mapMutations({
      chanisShowShadow:'showshadow/chanisShowShadow'
    }),
    onSearch(value){
      this.blockShow=3
      GetGoodsListData({
        keyword:value,
        order:this.order,
        sort:this.sort,
        categoryId: this.categoryId
      }).then(res=>{
          // console.log(res.data);
          let {data, filterCategory} = res.data
          this.productsListData=data

          let newArr = filterCategory.map(item=>{
             return { text: item.name , value: item.id,  checked:item.checked}
          })

          this.filterCategory = newArr


        
      })
      
    },
    onCancel(){
      this.$router.go(-1)
      this.chanisShowShadow(false)
    },
    onInput(value){
      this.blockShow=2
      GetSearchTipsData({
        keyword:value
      }).then(res=>{
        if(res.errno==0){
          // console.log(res.data)
          this.searchTipsListData=res.data
        }
      })
    }
  }
}
</script>
 
<style lang = "less" scoped>
.search-popup{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #efefef;
  z-index: 2;
}
  
</style>